<template>
	<view>
		<view class="title">
			<view class="search">
				<view class="input">
					<input type="text" placeholder="搜一搜" v-model="params.title" confirm-type="search"
						@confirm="search" />
					<i class="iconfont" style="margin-left: 60rpx;" @click="search">&#xe60a</i>
				</view>
			</view>
			<view class="tab" v-if="isShow === true">
				<view class="tabs">
					<view v-for="(item, index) in tablist" :key="index" class="tabs-1"
						:class="{ 'active': isSelected === index }" @click="selectTab(index)">
						{{ item.name }}
					</view>
				</view>
				<view class="more">
					<image src="https://pw.qyang.cc/static/set.png" mode="scaleToFill" @click="showfilter = true" />
				</view>
			</view>
			<view class="content" v-if="activityList.length > 0">
				<view class="activityList" v-for="(item, index) in activityList" @click="goDetail(item.id)">
					<view class="title">
						<view class="title-tab" v-if="item.is_recommend == 1">
							推荐
						</view>
						<view class="title-text">
							{{ item.title }}
						</view>
					</view>
					<view class="status">
						<view class="status status0" v-if="item.status == 0">
							筹备中
						</view>
						<view class="status status1" v-if="item.status == 1">
							报名中
						</view>
						<view class="status status2" v-if="item.status == 2">
							已结束
						</view>
					</view>
					<view class="image">
						<image :src="rq.imgUrl(item.image.split(',')[0])" mode="scaleToFill"></image>
						<view class="endtimes"
							v-if="(item.activity_status == 1 || item.activity_status == 2) && item.exam_status == 2">
							剩余显示时长:{{ item.diffindays }}天
						</view>
					</view>
					<view class="con">
						<view class="con1">
							<image src="https://pw.qyang.cc/static/svg/biao.svg" mode="aspectFill"
								style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"></image>
							{{ item.issue }}
						</view>
						<view class="con1">
							<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode="aspectFit"
								style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"></image>{{ item.address }}
						</view>
						<view class="con1 con2" v-if="item.activity_status == 1">
							<view class="con2-img">
								<image v-for="i, a in item.join_avatar" :key="a" :src="rq.imgUrl(i)" mode=""></image>
							</view>
							<view class="con2-text">
								累计 <span style="color: #FF7883;">{{ item.join_num }}人</span> 报名
							</view>
						</view>
						<view class="bottom">
							<view class="status1" :class="item.operate ? 'underline' : ''" v-if="item.exam_status == 2"
								@click.stop="showPop(item)">
								<view class="dian"></view>
								通过
							</view>
							<view class="status2" :class="item.operate ? 'underline' : ''" v-if="item.exam_status == 1"
								@click.stop="showPop(item)">
								<view class="dian"></view>
								待审
							</view>
							<!-- @click.stop="manageTip(item)" -->
							<view class="status3" :class="item.operate ? 'underline' : ''" v-if="item.exam_status == 3"
								@click.stop="showPop(item)">
								<view class="dian"></view>
								驳回
							</view>
							<view class="status3" :class="item.operate ? 'underline' : ''"
								v-if="item.exam_status == '-1'" @click.stop="showPop(item)">
								<view class="dian"></view>
								下架
							</view>
							<view class="manage-btn" @click.stop="manageStatus(item)">
								管理
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选 -->
		<u-popup :show="showfilter" :round="10" mode="bottom" closeable @close="showfilter = false"
			@open="showfilter = true">
			<view class="pop-content">
				<view class="title">
					筛选项
				</view>
				<view class="title-1">
					活动名称
					<input class="input" type="text" placeholder="请输入" v-model="params.title" />
				</view>

				<view class="title-1">
					活动时间
					<view class="time">
						<view class="time1" @click="showTime1 = true">
							<view v-if="!start_time">
								开始日期
							</view>
							<view v-else>
								{{ formatDate(start_time) }}
							</view>
						</view>
						<view class="time1" @click="showTime2 = true">
							<view v-if="!end_time">
								结束日期
							</view>
							<view v-else>
								{{ formatDate(end_time) }}
							</view>
						</view>
						<u-datetime-picker :show="showTime1" v-model="value1" mode="date"
							@confirm="choosetime1"></u-datetime-picker>
						<u-datetime-picker :show="showTime2" v-model="value2" mode="date"
							@confirm="choosetime2"></u-datetime-picker>
					</view>
				</view>
				<view class="title-1">
					活动状态
					<view class="status">
						<view class="status-item" v-for="(i, index) in statuslist" :key="index"
							:class="{ 'active': isSelected1 === index }" @click="selectTab1(index)">
							{{ i.name }}
						</view>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="btn1" @click="reset">
						重置
					</view>
					<view class="btn2" @click="confirmfilter">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 管理 -->
		<u-popup :show="showManage" :round="10" mode="bottom" @close="showManage = false" @open="showManage = true">
			<view class="pop-content">
				<view class="title">
					活动管理
				</view>
				<view class="con">
					<view class="con1">
						<view class="con1-2" @click="selectStatus('2')">
							<image class="btn-img1" v-if="model.exam_status == '2'"
								src="https://pw.qyang.cc/static/commit-success.png" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode="">
							</image>
							正常
						</view>
						<view class="con1-2" @click="selectStatus('4')">
							<image class="btn-img1" v-if="model.exam_status == '4'"
								src="https://pw.qyang.cc/static/commit-success.png" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode="">
							</image>
							下架
						</view>
						<view class="con1-2" @click="selectStatus('3')">
							<image class="btn-img1" v-if="model.exam_status == '3'"
								src="https://pw.qyang.cc/static/commit-success.png" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode="">
							</image>
							驳回
						</view>
						<view class="con1-2" @click="selectStatus('1')">
							<image class="btn-img1" v-if="model.exam_status == '1'"
								src="https://pw.qyang.cc/static/commit-success.png" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode="">
							</image>
							待审
						</view>
					</view>
					<view class="is_recommend">
						小编推荐
						<view>
							<u-switch space="2" @change="recomendChange" :value="model.is_recommend == 1"
								activeColor="#84E28D" inactiveColor="#F6F6F6">
							</u-switch>
						</view>
					</view>

					<view class="con2">
						推荐
						<u-input class="input" type="number" v-model="model.recommend" placeholder="请输入推荐值数值"
							border="none" inputAlign="right"></u-input>
					</view>
					<view class="con3">
						群二维码
						<view class="img_content">
							<view class="video-item" v-for="item, index in fileList1" :key="index" @click="chooseImage">
								<image :src="rq.imgUrl(item)" class="video"></image>
							</view>
							<view class="btn" @click="chooseImage" v-if="fileList1.length == 0">
								<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加图片
							</view>
						</view>
					</view>
					<view class="con3">
						操作说明 <span class="con3-text">（说明文字将同步到用户）</span>
						<view class="con3-input">
							<u--textarea v-model="model.operate" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="btn1" @click="showManage = false">
						取消
					</view>
					<view class="btn2" @click="exam">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 说明 -->
		<u-popup :show="showTip" :round="10" mode="bottom" @close="showTip = false" @open="showTip = true">
			<view class="pop-content">
				<view class="title">
					操作说明
				</view>
				<view class="con">
					<view class="con3">
						<view class="con3-input">
							<u--textarea v-model="value" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="btn1" @click="showTip = false">
						取消
					</view>
					<view class="btn2" @click="showTip = false">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showfilter: false,
			showManage: false,
			showTip: false,
			start_time: '',
			end_time: '',
			showTime1: false,
			showTime2: false,
			value1: Number(new Date()),
			selectedStatus: '0',
			fileList1: [],
			tablist: [{
				name: '全部'
			}, {
				name: '待审'
			}, {
				name: '通过'
			}, {
				name: '驳回'
			}],
			statuslist: [{
				id: 1,
				name: '筹备中'
			},
			{
				id: 2,
				name: '报名中'
			},
			{
				id: 3,
				name: '已结束'
			}
			],
			activityList: [],
			isSelected: 0,
			isSelected1: null,
			isShow: true,
			params: {
				page: 1
			},
			total: 0,
			currentItem: {},
			model: {
				exam_status: '2',
				is_recommend: 0,
			},
			reason: ''
		};
	},
	onLoad() {
		this.getList()
	},
	onPullDownRefresh() {
		this.params.page = 1;
		uni.hideNavigationBarLoading();
		this.getList()
	},
	onReachBottom() {
		if (this.activityList.length < this.total) {
			this.getList(true)
			this.params.page++;
		}
	},
	methods: {
		getList(more) {
			this.rq.getData('user_activity/get_activity_list', this.params).then(res => {
				if (more) {
					this.activityList = [...this.activityList, ...res.data.data]
				} else {
					this.activityList = res.data.data
				}
				this.total = res.data.total
				uni.stopPullDownRefresh();
			}).catch(err => {
				uni.stopPullDownRefresh();
			})
		},
		showPop(item) {
			if (item.operate) {
				this.reason = item.operate
				this.show = true
			}
		},
		exam() {
			this.model.id = this.currentItem.id
			this.model.crowd_code = this.fileList1.join()
			this.rq.getData('Activity/examine', this.model).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '修改成功~',
						icon: 'none'
					})
				}
				this.search()
				this.showManage = false
			})
		},
		search() {
			this.params.page = 1
			this.getList()
		},
		recomendChange(e) {
			this.model.is_recommend = e ? 1 : 0
		},
		manageStatus(item) {
			this.currentItem = item
			this.rq.getData('agent/activity_status_detail', { id: item.id }).then(res => {
				this.model.recommend = res.data.recommend
				this.model.is_recommend = res.data.is_recommend
				this.model.exam_status = res.data.exam_status
				this.fileList1 = res.data.crowd_code.split(',')
				this.model.operate = res.data.operate
			}).finally(() => {
				this.showManage = true
			})
		},
		manageTip(item) {
			this.showTip = true
		},
		handlefilter() {
			this.showfilter = true
		},
		selectTab(index) {
			this.isSelected = index;
			this.params.exam_status = index
			this.params.page = 1
			this.getList()
		},
		selectTab1(index) {
			this.isSelected1 = index
		},
		selectStatus(i) {
			console.log(i)
			this.model.exam_status = i
		},
		more() {
			this.isShow = false
			console.log('更多');
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/subpages/activityManage/detail?id=' + id
			})
		},
		goPage(url) {
			// 发起活动
			uni.navigateTo({
				url: `/subpages/${url}`
			})
		},
		choosetime1(e) {
			this.start_time = e.value
			this.showTime1 = false
		},
		choosetime2(e) {
			this.end_time = e.value
			this.showTime2 = false
		},
		confirmfilter() {
			this.params.page = 1
			this.params.start_time = this.start_time ? this.formatDate(this.start_time) : ''
			this.params.end_time = this.end_time ? this.formatDate(this.end_time) : ''
			this.params.activity_status = this.isSelected1 === null ? '' : this.statuslist[this.isSelected1].id
			this.getList()
			this.showfilter = false
		},
		reset() {
			this.params = {
				page: 1
			}
			this.getList()
			this.showfilter = false
		},
		formatDate(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');

			return `${year}-${month}-${day}`;
		},
		chooseImage() {
			let _this = this
			uni.chooseImage({
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success(res) {
					uni.showLoading({
						mask: true,
						title: '正在上传'
					})
					getApp().uploadFile(res.tempFilePaths, {}, (url) => {
						// _this.fileList1 = [..._this.fileList1, ...url]
						_this.fileList1 = [url[0]]
						console.log(_this.fileList1)
						uni.hideLoading()
					})
				}
			})
		},
	}
}
</script>

<style lang="scss">
.title {
	background-color: #ffffff;
}

.is_recommend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;

	&::v-deep .u-switch {
		width: 64rpx !important;
		height: 30rpx !important;
		border-radius: 10rpx !important;
	}

	&::v-deep .u-switch__node {
		width: 27.43rpx!important;
		height: 27rpx!important;
		border-radius: 8rpx!important;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(157, 170, 149, 0.251);
		transform: translateX(0rpx)!important;
	}
	&::v-deep .u-switch__node.false {
		transform: translateX(-33rpx)!important;
	}
}

.img_content {
	padding: 15rpx 25rpx;

	.video {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8px;
	}

	.btn {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8px;
		opacity: 1;
		background: #F7F7F7;
		box-sizing: border-box;
		border: 0.5px solid #C4C4C4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;

		color: #B8B8B8;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 20rpx;
		}
	}
}

.pop-content {
	width: 100%;
	padding: 36rpx 0 90rpx 0;
	font-family: PingFang SC;
	font-size: 15px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0px;
	color: #333333;

	.con {
		margin: 20rpx 30rpx;
	}

	.con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		color: #333333;

		.con1-2 {
			margin-right: 20rpx;
			display: flex;
			align-items: center;
		}

		image {
			width: 16px;
			height: 16px;
			margin-right: 20rpx;
		}
	}

	.con2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		margin: 40rpx 10rpx;
		color: #333333;

		.input {
			width: 81.19%;
			height: 34px;
			border-radius: 8px;
			opacity: 1;

			background: #F6F6F6;

		}
	}

	.con3 {
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		margin: 40rpx 10rpx;
		color: #333333;

		.con3-text {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #FF7681;
		}

		.con3-input {
			margin-top: 20rpx;
		}

		.con3-photo {
			margin-top: 20rpx;

			.btn {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8px;
				opacity: 1;
				background: #F7F7F7;
				box-sizing: border-box;
				border: 0.5px solid #C4C4C4;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;

				color: #B8B8B8;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.title {
		text-align: center;
	}

	.title-1 {
		margin: 10rpx 30rpx;

		.input {
			width: 89.07%;
			height: 34px;
			border-radius: 8px;
			opacity: 1;
			background: #F6F6F6;
			display: flex;
			align-items: center;
			justify-content: start;
			line-height: 34px;
			padding: 0 20rpx;
			margin: 20rpx 0;
		}

		.status {
			display: flex;
			flex-wrap: wrap;
			margin: 20rpx 0;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;

			color: #999999;

			.status-item {
				width: 100px;
				height: 40px;
				border-radius: 8px;
				opacity: 1;
				background: #F6F6F6;
				margin: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.status-item.active {
				background: #ff5866;
				color: #fff;
			}


		}

		.time {
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20rpx 0;

			.time1 {
				width: 145px;
				height: 40px;
				border-radius: 8px;
				opacity: 1;
				background: #F6F6F6;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 30rpx;
			}
		}
	}

	.pop-bottom {
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		text-align: center;
		letter-spacing: 0px;
		height: 60px;
		width: 100%;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);

		.btn1 {
			width: 133px;
			height: 37px;
			border-radius: 102px;
			opacity: 1;
			background: #F7F7F7;
			border: 1px solid #F7F7F7;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 80rpx;
		}

		.btn2 {
			color: #ffffff;
			width: 133px;
			height: 37px;
			border-radius: 102px;
			opacity: 1;
			background: #FF5866;
			border: 1px solid #FF5866;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.to-btn {
	position: fixed;
	z-index: 1;
	right: 10rpx;
	top: 700rpx;

	image {
		width: 50px;
		height: 50px;
	}
}

.tab {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.more {
		image {
			width: 25rpx;
			height: 25rpx;
			margin-right: 40rpx;
		}
	}

	.tabs {
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		height: 60rpx;
		width: 80%;

		.tabs-1 {
			flex: 1;
			justify-content: center;
			align-items: center;
			display: flex;

			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;

			color: #999999;
		}

		.tabs-1.active {
			position: relative;
			font-size: 15px;
			font-weight: 600;
			line-height: 15px;
			letter-spacing: 0px;
			transition: all 0.3s ease;
			color: #333333;
		}

		.tabs-1.active::after {
			border-radius: 3px;
			opacity: 1;
			background: #FF7883;
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 55rpx;
			height: 3px;
			transition: width 0.3s ease, opacity 0.3s ease;
		}
	}
}

.content {
	padding: 20rpx 30rpx 100rpx 30rpx;
	position: relative;
	background-color: #F4F4F4;

	.activityList {
		margin-bottom: 30rpx;
		border-radius: 10px;
		background-color: #ffffff;
		width: 100%;
		// height: 686rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.bottom {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			border-top: 1px solid #F0EFEF;
			width: 100%;

			.status1 {
				color: #00BC56;
				margin-left: 40rpx;
				display: flex;
				align-items: center;

				.dian {
					width: 5px;
					height: 5px;
					background: #00BC56;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				&.underline {
					text-decoration: underline;
				}
			}

			.status2 {
				display: flex;
				color: #AE9CFE;
				margin-left: 40rpx;
				align-items: center;

				.dian {
					width: 5px;
					height: 5px;
					background: #AE9CFE;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				&.underline {
					text-decoration: underline;
				}
			}

			.status3 {
				display: flex;
				color: #FF7681;
				margin-left: 40rpx;
				align-items: center;

				.dian {
					width: 5px;
					height: 5px;
					background: #FF7681;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				&.underline {
					text-decoration: underline;
				}
			}

			.manage-btn {
				width: 75px;
				height: 24px;
				border-radius: 102px;
				opacity: 1;
				background: #FF5866;
				border: 1px solid #FF5866;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 12px;
				font-weight: normal;
				line-height: 12px;
				text-align: center;
				letter-spacing: 0px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 40rpx;
			}
		}

		.title {
			font-size: 14px;
			font-weight: 600;
			line-height: 2px;
			letter-spacing: 0px;
			color: #333333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			// // width: 600rpx;
			// padding: 30rpx;
			// position: relative;
			// margin: 10rpx 0;
			padding: 10rpx 28rpx;
			position: relative;
			margin: 10rpx 0;
			width: 550rpx;
			display: flex;
			align-items: center;

			.title-tab {
				width: 50px;
				height: 40rpx;
				border-radius: 4px;
				opacity: 1;

				background: #FF7681;
				font-size: 12px;
				font-weight: normal;
				line-height: 12px;
				text-align: center;
				letter-spacing: 0px;
				color: #FFFFFF;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.title-text {
				width: 500rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}

		.image {
			width: 100%;
			height: 400rpx;
			position: relative;

			image {
				width: 100%;
				height: 400rpx;
			}

			.endtimes {
				color: #ffffff;
				background-color: #ff7681;
				padding: 15rpx 80rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
				position: absolute;
				left: 150rpx;
				bottom: -16px;
				opacity: 1;
			}
		}

		.status {
			position: absolute;
			right: 0;
			margin-right: 30rpx;
			width: 54.64px;
			height: 24.72px;
			border-radius: 0px 8px 0px 8px;
			opacity: 1;

			font-size: 13px;
			font-weight: 500;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			// background: #84E28C;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.status0 {
				background: #84E28C;
				margin-right: -1rpx;
			}

			.status1 {
				background: #AE9CFE;
				margin-right: -1rpx;
			}

			.status2 {
				background: rgba(153, 153, 153, 0.1);
				color: #999999;
				margin-right: -1rpx;
			}

		}

		.btn {
			right: 30%;
			position: absolute;
			height: 38px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 99px;
			opacity: 1;
			margin-top: 445rpx;
			background: #FF7681;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 18px;
			letter-spacing: 0px;
			color: #FFFFFF;
			text-shadow: 0px 1px 4px rgba(108, 37, 37, 0.25);
			padding: 0 20rpx;
		}

		.con {
			width: 100%;
			padding: 20rpx 0;

			.con1 {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				margin: 20rpx;
				color: #333333;
				display: flex;
				align-items: center;
			}

			.con2 {
				display: flex;

				.con2-img {
					width: 460rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					image {
						width: 21px;
						height: 21px;
						margin-right: 10rpx;
					}
				}

				.con2-text {
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 12px;
					letter-spacing: 0px;

					font-variation-settings: "opsz" auto;
					/* 累计 */
					color: #000000
				}
			}
		}
	}
}

.search {
	width: 92%;
	height: 35px;
	border-radius: 99px;
	opacity: 1;

	background: #FCF9F9;

	box-sizing: border-box;
	border: 1px solid #333333;
	margin: 0 auto 20rpx;
	display: flex;
	align-items: center;

	.input {
		display: flex;
		align-items: center;
		// justify-content: center;
		width: 100%;

		input {
			padding-left: 30rpx;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 13px;
			letter-spacing: 0px;
			color: #999999;
			width: 80%;
		}
	}
}
</style>